<template>
  <div class="maign" @click="$emit('ondclick')">
    <div class="hight" ref="hight">
      <div
        class="textname"
        :class="{ ' current': currentLineNum === index }"
        v-for="(line, index) in currentLyric.lines"
        :key="index"
        ref="lyricLine"
      >
        {{ line.txt }}
      </div>
    </div>
  </div>
</template>

<script>
import { getLyrics } from '@/api/play'
import Lyric from 'lyric-parser'

export default {
  props: {
    switchover: {
      type: Boolean,
      default: true
    }
  },
  components: {},
  data () {
    return {
      id: this.$route.params.id, // 歌曲id
      currentLyric: [],
      currentLineNum: null,
      C_pos: 7, // C位
      offset: -35 // 滚动距离（应等于行高）
    }
  },
  created () {
    this.getLyrics()
  },
  mounted () {},
  methods: {
    async getLyrics () {
      const { lrc } = await getLyrics({ id: this.$route.params.id })
      this.currentLyric = new Lyric(lrc.lyric, this.handleLyric)

      if (this.switchover) {
        this.currentLyric.play()
      }
    },
    handleLyric ({ lineNum, txt }) {
      const hight = this.$refs.hight
      this.currentLineNum = lineNum
      // console.log(lineNum)
      if (lineNum > this.C_pos) {
        hight.style.transform =
          'translateY(' + (lineNum - this.C_pos) * this.offset + 'px)' // 整体向上滚动一行高度
      }
    },
    // 滚回到开头，用于播放结束时
    goback () {
      const hight = this.$refs.hight
      // document.querySelector('#lyric .lineHigh').removeAttribute('class')
      hight.style.transform = 'translateY(0)'
      this.currentLineNum = 0
    },
    BigInt (currentTime) {
      if (
        this.currentLineNum === this.currentLyric.lines[this.currentLineNum]
      ) {
        return
      }

      if (
        parseFloat(this.currentLyric.lines[this.currentLineNum].time) <=
        currentTime
      ) {
        this.handleLyric() // 高亮当前行
        this.currentLineNum++
        console.log(currentTime)
      }
    }
  }
}
</script>

<style scoped lang="less">
.maign {
  height: 990px;
  overflow: hidden;
}
.textname {
  font-size: 30px;
  margin: 30px 0;
  text-align: center;
}
.hight {
  //   position: absolute;
  //   top: 45%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  width: 500px;
  // height: 1300px;
  margin: 0 auto;
  overflow: scroll;
}
.current {
  color: red;
}
</style>
